import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { connect } from '@tarojs/redux'

import './filterBar.less'

//img
import solt from '../../static/img/ic-solt.png'
import up from '../../static/img/ic-up.png'

import { setPosition, getAreaList, getMoneyList, getMoreList, clickArea, clickMoney } from '../../actions/filterOption'

@connect(({ optionPage }) => ({
  optionPage
})
  , (dispatch) => ({
    setPosition(params, params1) {
      dispatch(setPosition(params, params1))
    },
    getAreaList(params) {
      dispatch(getAreaList(params))
    },
    getMoneyList(params) {
      dispatch(getMoneyList(params))
    },
    getMoreList(params) {
      dispatch(getMoreList(params))
    },
    clickArea(params) {
      dispatch(clickArea(params))
    },
    clickMoney(params) {
      dispatch(clickMoney(params))
    }
  }))
class FilterBar extends Component {
  componentWillReceiveProps(nextProps) {
    console.log(this.props, nextProps)
  }
  state = {
    rotate: 'transform: rotate(0deg)',
    acRotate: 'transform: rotate(180deg)',
    transtate: 'transform: translateY(100%) translateX(-100%)',
    acTranslate: 'transform: translateY(100%) translateX(0%)',
    placeAreaOption: [],
    areaStyle: []
  }
  componentWillMount() {
    // eslint-disable-next-line taro/this-props-function
    this.props.getAreaList && this.props.getAreaList()
    // eslint-disable-next-line taro/this-props-function
    this.props.getMoneyList && this.props.getMoneyList()
    // eslint-disable-next-line taro/this-props-function
    this.props.getMoreList && this.props.getMoreList()
  }
  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }
  optionEvent(val, index) {
    // eslint-disable-next-line taro/this-props-function
    this.props.setPosition && this.props.setPosition(val, index)
  }
  areaClickOption(id, index) {
    let idArr = this.state.placeAreaOption
    this.setState(prevState => {
      let arr = prevState.placeAreaOption
      arr.push({id: id, poindex: index})
      prevState.placeAreaOption = arr
    })
    // eslint-disable-next-line taro/this-props-function
    this.props.clickArea && this.props.clickArea(idArr)
    this.setState((nextState) => {
      let arr = nextState.areaStyle
      arr[index] = 'background: #329291;color: #ffffff'
    })
  }
  st(i, e){
    console.log(i ,e)
    return '0000'
  }
  render() {
    let { arrMove } = this.props.optionPage
    let acRotate = this.state.acRotate
    let rotate = this.state.rotate
    let transtate = this.state.transtate
    let acTranslate = this.state.acTranslate
    // let arr = [0,0,0,1]
    let { areaList } = this.props.optionPage
    let { moneyList } = this.props.optionPage
    let { moreList } = this.props.optionPage
    let { areaOptionContent } = this.props.optionPage
    console.log(areaOptionContent)
    return (
      <View className='comp-filterBar'>
        <View className='bar-outer'>
          <View className='solt'>
            <View className='commonView' onClick={this.optionEvent.bind(this, 'solt', 0)}>
              <Text className='text'>默认排序</Text>
              <Image src={solt} className='ic-solt'></Image>
            </View>
          </View>
          <View className='area'>
            <View className='commonView' onClick={this.optionEvent.bind(this, 'area', 1)}>
              <Text className='text'>区域</Text>
              <Image src={up} className='ic-up' style={arrMove[1] ? acRotate : rotate}></Image>
            </View>
            <View className='option-usePosition' style={arrMove[1] ? acTranslate : transtate}>
              {
                areaList.map((item, index) => {
                return <Text
                  key={index}
                  className='areaListItem'
                  onClick={this.areaClickOption.bind(this, item.id, index)} 
                  style={this.state.areaStyle[index]}
                  data-index={index}
                >{item.name}
                </Text>
                })
              }
            </View>
          </View>
          <View className='money'>
            <View className='commonView' onClick={this.optionEvent.bind(this, 'money', 2)}>
              <Text className='text'>价格</Text>
              <Image src={up} className='ic-up' style={arrMove[2] ? acRotate : rotate}></Image>
            </View>
            <View className='option-usePosition' style={arrMove[2] ? acTranslate : transtate}>
              {
                moneyList.map((item, index) => <Text key={index} className='moneyListItem'>{item.moneyNum}</Text>)
              }
            </View>
          </View>
          <View className='more'>
            <View className='commonView' onClick={this.optionEvent.bind(this, 'more', 3)}>
              <Text className='text'>更多</Text>
              <Image src={up} className='ic-up' style={arrMove[3] ? acRotate : rotate}></Image>
            </View>
            <View className='option-usePosition' style={arrMove[3] ? acTranslate : transtate}>
              {
                moreList.map((item, index) => <Text key={index} className='moreListItem'>{item.name}</Text>)
              }
            </View>
          </View>
        </View>
      </View>
    )
  }
}

export default FilterBar
